/**
 * Webpack 中的 Source Map 是一种用于调试的工具，它可以将编译后的代码映射回原始源代码，从而帮助开发者更容易地定位和修复代码中的错误。
  1. 什么是 Source Map？
  Source Map 是一种文件格式，它为编译后的代码提供了与原始源代码之间的映射关系。它允许浏览器在调试时显示原始代码，而不是压缩或转换后的代码。

  2. Source Map 的工作原理
  当你在开发过程中使用 Webpack 进行代码打包时，Webpack 会生成一个 Source Map 文件。这个文件包含了原始代码和生成代码之间的映射信息。浏览器在加载压缩后的代码时，会同时加载 Source Map 文件，从而在开发者工具中显示原始代码。

  3. Source Map 的类型
  Webpack 支持多种类型的 Source Map，常见的类型包括：
  -  eval : 使用  eval()  执行每个模块，并在每个模块中生成 Source Map。这种方式速度快，但生成的代码体积较大。
  -  source-map : 生成完整的 Source Map 文件，适合生产环境，但构建速度较慢，生成的文件较大。
  -  inline-source-map : 将 Source Map 作为 Data URL 嵌入到生成的文件中，适合开发环境，方便调试。
  -  cheap-module-source-map : 生成较小的 Source Map，适合开发，忽略列映射（column mapping），但仍然保留行映射。
  -  hidden-source-map : 生成 Source Map 文件，但不在浏览器中暴露，适合生产环境，便于调试但不暴露给用户。

  4. 在 Webpack 中配置 Source Map
  在 Webpack 的配置文件中，可以通过  devtool  属性来配置 Source Map。例如：
  module.exports = {
      // ...
      devtool: 'source-map', // 使用完整的 Source Map
      // 或者
      devtool: 'inline-source-map', // 使用内联 Source Map
      // ...
  };
  5. 使用 Source Map 的优点
  - 调试方便: 通过 Source Map，可以在浏览器的开发者工具中直接查看原始代码，方便调试和定位问题。
  - 提高开发效率: 开发者可以更快速地找到代码错误，而不需要手动查找编译后的代码。

  6. 注意事项
  - 性能影响: 在某些情况下，生成 Source Map 可能会影响构建性能，尤其是在大型项目中。
  - 安全性: 在生产环境中，暴露 Source Map 可能会泄露源代码，因此要谨慎处理。

  总结
  Webpack 中的 Source Map 是一个强大的调试工具，可以帮助开发者更轻松地定位和修复代码中的错误。通过合理配置 Source Map 类型，可以在开发和生产环境中获得最佳的调试体验。
 */
const path = require("path");

module.exports = {
  mode: "production",
  /**
    devtool的值:
    一: 常见的
      1. false : 不生成 Source Map，适合生产环境，构建速度快，但调试不方便。
      2. none => production : 不生成 Source Map，适合生产环境，构建速度快，但调试不方便。
      3. eval => development : 使用 eval 函数执行模块代码，适合开发环境，构建速度快，但生成的代码体积较大。
      4. source-map => development : 生成完整的 Source Map 文件，适合开发环境，构建速度较慢，但调试方便。

    二: 不常见的
      1. inline-source-map : 生成内联的 Source Map，适合开发环境，构建速度快，但生成的代码体积较大。
      2. hidden-source-map : 生成 Source Map 文件，但不在浏览器中暴露，适合生产环境，便于调试但不暴露给用户。
      3. cheap-source-map : 生成简化的 Source Map，适合开发环境，构建速度快，但生成的 Source Map 不包含列信息。
      4. cheap-module-source-map : 生成简化的 Source Map，适合开发环境，构建速度快，但生成的 Source Map 包含模块信息。
      5. eval-cheap-source-map : 使用 eval 函数执行模块代码，并生成简化的 Source Map，适合开发环境，构建速度快，但生成的代码体积较大。
      6. eval-cheap-module-source-map : 使用 eval 函数执行模块代码，并生成简化的 Source Map，适合开发环境，构建速度快，但生成的 Source Map 包含模块信息。
      7. eval-source-map : 使用 eval 函数执行模块代码，并生成完整的 Source Map，适合开发环境，构建速度快，但生成的代码体积较大。
      8. inline-cheap-source-map : 生成内联的简化的 Source Map，适合开发环境，构建速度快，但生成的代码体积较大。
      9. inline-cheap-module-source-map : 生成内联的简化的 Source Map，适合开发环境，构建速度快，但生成的 Source Map 包含模块信息。
      10. nosources-source-map : 生成 Source Map 文件，但不包含源代码，适合生产环境，便于调试但不暴露给用户。
   */
  devtool: "nosources-source-map", // 生成 Source Map 文件
  entry: "./src/main.js", // 入口文件
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配 .js 文件
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};
